//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent } from 'react';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    Button,
    Modal,
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;

//查看表单
@Form.create()
class ViewForm extends PureComponent {
    static defaultProps = {
        handleViewModalVisible: () => {},
    values: {},
};

constructor(props) {
    super(props);

    this.state = {
        formVals: {
            recordid: props.values.recordid,
            id: props.values.id,
            text: props.values.text,
            parentid: props.values.parentid,
            parent_name: props.values.parent_name,
            component: props.values.component,
            i18n_name: props.values.i18n_name,
            href: props.values.href,
            enable: props.values.enable,
            redirect: props.values.redirect,
            
            indexs: props.values.indexs,
            icon: props.values.icon,
            sequences: props.values.sequences,
            hreftarget: props.values.hreftarget,
            valid: props.values.valid,
            leaf: props.values.leaf,
            systemid: props.values.systemid,
            isframe: props.values.isframe,
            levelcode: props.values.levelcode,
            leaftype: props.values.leaftype,
            cls: props.values.cls,
            hideInMenu: props.values.hideInMenu,
            hideChildrenInMenu: props.values.hideChildrenInMenu,
        },
    };


}



renderContent = (formVals) => {
    const { form,values:{type} } = this.props;

    return (
            <Form  layout="vertical">

				{type == 1?(
					<div>
						<Row gutter={{ md: 8, lg: 24, xl: 48 }}>


			                <Col  md={12} sm={24}>
			                    <FormItem  label="菜单名称">
			                        {form.getFieldDecorator('text', {
			                        initialValue: formVals.text,
			                        })(<Input readOnly placeholder="请输入" />)}
			                    </FormItem>
			                </Col>

			                <Col  md={12} sm={24}>
			                    <FormItem  label="链接">
			                        {form.getFieldDecorator('href', {
			                        initialValue: formVals.href,
			                        })(<Input readOnly placeholder="请输入" />)}
			                    </FormItem>
			                </Col>
			
			
			            </Row>

						<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

							<Col  md={12} sm={24}>
						        <FormItem  label="国际化菜单名">
						            {form.getFieldDecorator('i18n_name', {
						            initialValue: formVals.i18n_name,
						            })(<Input readOnly placeholder="请输入" />)}
						        </FormItem>
					        </Col>
					        <Col md={12} sm={24}>
						        <FormItem label="是否可用">
						            {form.getFieldDecorator('enable',{
						            	initialValue: formVals.enable,
						            })(
						                <Select placeholder="请选择" style={{ width: '100%' }}>
						                    <Option value="1">是</Option>
						                    <Option value="0">否</Option>
						                </Select>
						            )}
						        </FormItem>
					        </Col>
					
					    </Row>
					   	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

							<Col  md={12} sm={24}>
						        <FormItem  label="路由组件">
						            {form.getFieldDecorator('component', {
						            initialValue: formVals.component,
						            })(<Input readOnly placeholder="请输入" />)}
						        </FormItem>
					        </Col>
					        <Col  md={12} sm={24}>
						        <FormItem  label="路由重定向">
						            {form.getFieldDecorator('redirect', {
						            initialValue: formVals.redirect,
						            })(<Input readOnly placeholder="请输入" />)}
						        </FormItem>
					        </Col>
				
				    	</Row>
            			<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

					        <Col  md={12} sm={24}>
						        <FormItem  label="上级菜单">
						            {form.getFieldDecorator('parent_name', {
						            initialValue: formVals.parent_name,
						            })(<Input readOnly placeholder="请输入" />)}
						        </FormItem>
					        </Col>

            			</Row>            
					</div>
				):(
					<div>
						<Row gutter={{ md: 8, lg: 24, xl: 48 }}>


			                <Col  md={12} sm={24}>
			                    <FormItem  label="按钮名称">
			                        {form.getFieldDecorator('text', {
			                        initialValue: formVals.text,
			                        })(<Input readOnly placeholder="请输入" />)}
			                    </FormItem>
			                </Col>
							
							
							
							<Col  md={12} sm={24}>
						        <FormItem  label="上级菜单">
						            {form.getFieldDecorator('parent_name', {
						            initialValue: formVals.parent_name,
						            })(<Input readOnly placeholder="请输入" />)}
						        </FormItem>
					        </Col>


            			</Row>
					</div>
		)}                    
      
    </Form>
);

};



render() {
    const { viewModalVisible, handleViewModalVisible, values } = this.props;
    const { formVals } = this.state;

    return (
        <Modal
    width={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="查看"
    visible={viewModalVisible}
    onCancel={() => handleViewModalVisible(false, values)}
    footer={<Button key="back" onClick = {() => handleViewModalVisible(false, values) }>取消</Button>}
>

    {this.renderContent(formVals)}
</Modal>
);
}

}

export default ViewForm;
